<template>
    <div>
        <div class="container">
            <div class="left-content">
                <div class="handle-box">
                    <el-input v-model="query.name" placeholder="请输入角色名称"></el-input>
                    <!--                         style="width:190px;margin-right:10px"
                    -->
                    <!-- <el-button type="primary" icon="el-icon-search" @click="onSubmit"></el-button> -->
                </div>
                <el-table
                    :data="tableData"
                    border
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="name" label="角色名称" align="center"></el-table-column>
                </el-table>
            </div>
            <div class="right-content">
                <div class="handle-box">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                </div>
                <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="width:240px"></el-input>
                <!--  :data="data" -->
                <el-tree
                    :data="data"
                    default-expand-all
                    show-checkbox
                    node-key="id"
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    ref="tree"
                ></el-tree>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    data() {
        return {
            query: {
                pageIndex: 1,
                pageSize: 10
            },
            filterText: '',
            data: [
                {
                    id: 1,
                    label: '一级 1',
                    children: [
                        {
                            id: 4,
                            label: '二级 1-1',
                            children: [
                                {
                                    id: 9,
                                    label: '三级 1-1-1'
                                },
                                {
                                    id: 10,
                                    label: '三级 1-1-2'
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 2,
                    label: '一级 2',
                    children: [
                        {
                            id: 5,
                            label: '二级 2-1'
                        },
                        {
                            id: 6,
                            label: '二级 2-2'
                        }
                    ]
                },
                {
                    id: 3,
                    label: '一级 3',
                    children: [
                        {
                            id: 7,
                            label: '二级 3-1'
                        },
                        {
                            id: 8,
                            label: '二级 3-2'
                        }
                    ]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            count: 1,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                delivery2: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [
                {
                    name: '超级用户'
                },
                {
                    name: '普通用户'
                }
            ]
        };
    },
    created() {},
    methods: {
        // 保存
        onSubmit() {
            this.$message({
                message: '获取成功！',
                type: 'success'
            });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.input-class {
    width: 190px;
}
.container {
    display: flex;
    justify-content: left;
}
.left-content {
    width: 20%;
    height: 100%;
    margin-right: 0px;
}
.right-content {
    width: 80%;
    height: 100%;
    padding-left: 20px;
}
</style>
